/**证件照尺寸类型选择组件  */
Component({
    options: {
        addGlobalClass: true
    },
    heightArr: [],
    //记录scroll-view滚动过程中距离顶部的高度
    distance: 0,
    properties: {
        // 接收调用组件页面传递的类型数组,
        //每项内容包含类型下的所有证件照尺寸
        items: {
            type: Array,
            value: []
        },
        style: {
            type: String,
            value: ""
        }
    },
    data: {
        // 组件右侧高度,在获取到数据后,获取父窗口设定的组件高度
        rightHeight: 0,
        currentLeft: 0, //左侧选中的下标
        selectId: "item0", //当前显示的元素id
        scrollTop: 0, //用作跳转后右侧视图回到顶部
        // 选中尺寸
        selectSize: undefined,
        // 搜索结果
        searchList: [],
        // 搜索输入框内容
        inputTxt: "",
        titleHeight: 0,
        // 是否显示搜索结果栏
        isShowSearchResult:false
    },
    methods: {
        //选择项目左侧点击事件 currentLeft：控制左侧选中样式  selectId：设置右侧应显示在顶部的id
        proItemTap(e) {
            this.setData({
                currentLeft: e.currentTarget.dataset.pos,
                selectId: "item" + e.currentTarget.dataset.pos
            })
        },
        //计算右侧每一个分类的高度，在数据请求成功后请求即可
        selectHeight() {
            let that = this;
            this.heightArr = [];
            let h = 0;
            this.getNodeRect('.pro-box', res => {
                res.forEach((item) => {
                    h += item.height;
                    that.heightArr.push(h);
                })
            })
        },
        onSearch(e) {
            let keytxt = e.detail.value;
            let searchResult = [];
            this.data.items.forEach(elem => {
                elem.sizes.forEach(size => {
                    if (size.name.indexOf(keytxt) >= 0) {
                        searchResult.push(size)
                    }
                })
            });
            // 清空查询结果
            this.setData({
                searchList: [],
                isShowSearchResult:false
            })
            // 如果有多个匹配结果,则展示结果列表
            if (searchResult.length > 1) {
                this.setData({
                    searchList: searchResult,
                    isShowSearchResult:true,
                })
            } else if (searchResult.length == 1) {
                this.setData({
                    selectSize: searchResult[0], // 设置选中尺寸
                    selectId: 'size' + searchResult[0].id, // 设置滚动位置
                })
            }
        },
        clearText(e) {
            this.setData({
                inputTxt: ""
            })
        },
        //  点击搜索结果后设置选中尺寸,并滚动到相应位置
        searchResultClick(e) {
            let searched = e.currentTarget.dataset.searched;
            this.setData({
                selectSize: searched, // 设置选中尺寸
                selectId: 'size' + searched.id, // 设置滚动位置
                searchList: [],
                isShowSearchResult:false
            })

        },
        getNodeRect(node, callback) {
            const query = wx.createSelectorQuery().in(this);
            query.selectAll(node).boundingClientRect()
            query.exec(function (res) {
                callback(res[0]);
            })
        },
        itemSelected(e) {
            this.setData({
                selectSize: e.currentTarget.dataset.size
            })
        },
        //监听scroll-view的滚动事件
        scrollEvent(event) {
            if (this.heightArr.length == 0) {
                return;
            }
            let scrollTop = event.detail.scrollTop;
            let current = this.data.currentLeft;
            if (scrollTop >= this.distance) { //页面向上滑动
                //如果右侧当前可视区域最底部到顶部的距离 超过 当前列表选中项距顶部的高度（且没有下标越界），则更新左侧选中项
                if (current + 1 < this.heightArr.length && scrollTop >= this.heightArr[current]) {
                    this.setData({
                        currentLeft: current + 1
                    })
                }
            } else { //页面向下滑动
                //如果右侧当前可视区域最顶部到顶部的距离 小于 当前列表选中的项距顶部的高度，则更新左侧选中项
                if (current - 1 >= 0 && scrollTop < this.heightArr[current - 1]) {
                    this.setData({
                        currentLeft: current - 1
                    })
                }
            }
            //更新到顶部的距离
            this.distance = scrollTop;
        },
        /*外部调用获取选中尺寸 */
        getSelectedSize() {
            return this.data.selectSize;
        },
        /*窗口打开时清除已选尺寸 */
        clearSelectedSize() {
            this.setData({
                selectSize: null
            })
        },
        //出发关闭事件
        close() {
            this.triggerEvent("close");
        },
        // 计算顶部关闭按钮和搜索栏高度
        getTitleHeight() {
            const _this = this;
            this.createSelectorQuery(this).selectAll('.title').boundingClientRect(function (rects) {
                let total = 0;
                rects.forEach(function (rect) {
                    total += rect.height;
                })
                _this.setData({
                    titleHeight: total
                })
            }).exec()
        },
        init() {
            this.getTitleHeight();
        }
    },
    // 数据监听
    observers: {
        'items': function (items) {
            // 在items接收到赋值时,将数据分成左侧菜单的数据(leftMenuList)
            //和右侧内容区数据(rightContent)
            this.selectHeight();

        }
    },
    lifetimes: {
        attached: function () {
            this.init();
        }
    }
})